<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function sendAjax(){
            $.ajax({
                type:'get',
                url:'http://localhost:8080/ajax1',
                dataType:'json',
                success:function(result){
                    console.log(result)
                }
            })
        }

        function sendPost(){
            // var data={
            //     id: 1001,
            //     username:'tom',
            //     password:'123',
            //     age:18
            // }

            // var data = [1,4,8]

            // var data = [
            //     {
            //         id: 1001,
            //         username:'tom',
            //         password:'123',
            //         age:18
            //     },
            //     {
            //         id: 1002,
            //         username:'jack',
            //         password:'123',
            //         age:18
            //     },
            //     {
            //         id: 1003,
            //         username:'alice',
            //         password:'123',
            //         age:18
            //     }
            // ]

            // var data = {
            //     id:1001
            // }

            // $.ajax({
            //     type:'post',
            //     url:'param6',
            //     contentType:'application/json;charset=utf8', // 数据为json格式字符串
            //     data:JSON.stringify(data), // 将json对象转换为json格式字符串
            //     dataType:'json',
            //     success:function(result){
            //         console.log(result)
            //     }
            // })

            var data={
                id: 1001,
                username:'汤姆',
                password:'123',
                age:18,
                height:190.4,
                birthday:'2004-12-05'
            }

            $.ajax({
                type:'post',
                url:'param7',
                contentType:'application/x-www-form-urlencoded;charset=utf8', // 默认数据为表单格式
                data:data, // 普通的表单数据
                dataType:'json',
                success:function(result){
                    console.log(result)
                }
            })
        }

        function doUpload(){
            // 文件上传时，需要将数据封装为FormData
            var formData = new FormData();
            formData.append('name', $('#name').val());
            formData.append('avatar',$('#avatar')[0].files[0])


            $.ajax({
                type:'post', // 请求方式必须为post
                url:'upload',
                data:formData, // 将数据封装为FormData
                contentType:false, // 设置内容类型为multipart/form-data
                processData: false, // 不处理数据（不需要将数据转换为字符串）
                success:function(res){
                    console.log(res)
                }
            })
        }
    </script>
</head>
<body>
  <button onclick="sendAjax()">发送Ajax请求</button>
  <hr>

  <!--发送post请求-->
  <button onclick="sendPost()">发送post请求</button>
  <hr>

  <form id="uploadForm">
      姓名：<input type="text" id="name"> <br>
      头像：<input type="file" id="avatar"> <br>
      <input type="button" value="提交" onclick="doUpload()">
  </form>
</body>
</html>